import React, {
    Fragment,
    PureComponent
} from 'react';

import {
    View,
    Text,
    Image,
    FlatList,
    StyleSheet
} from 'react-native';

import {
    Actions
} from 'react-native-router-flux';

import * as Const from './../../../const';


import parseUrl from './../../../utils/parseUrl';

import {
    Press,
    Viewer,
    FastImage
} from '../../../components/index';

import add_icon from './../../../images/profile/add.png';
import pic_icon from './../../../images/profile/pic.png';

interface Props {
    add?: boolean,
    urls?: Array<string>
}

class Photos extends PureComponent<Props> {
    static defaultProps = {
        urls: [],
        add: false
    }

    public viewer: any = null;

    onReviewImage = (index:number) => {
        const {
            add
        } = this.props;

        const {
            urls
        } = this.props;

        this.viewer.open(urls, add ? index - 1 : index);
    }

    private onPressAdd = () => {
        Actions.push(`/user/photo`,{
            source:`me`
        })
    }

    get renderList() {
        const {
            urls=[],
            add
        } = this.props;

        return add ? [`add_item_flag`, ...urls] : urls
    }

    private renderItem = ({item,index}:any) => {
        if(item === `add_item_flag`) {
            return (
                <Press
                    source={add_icon}
                    onPress={this.onPressAdd}
                    style={styles.addButton}
                />
            )
        }

        return (
            <Press
                value={index}
                style={styles.itemStyle}
                onPress={this.onReviewImage}
            >
                <FastImage
                    url={parseUrl(item)}
                    style={styles.imageStyle}
                />
            </Press>
        )
    }

    render() {
        return (
            <Fragment>
                <Viewer ref={(e:any) => this.viewer=e} />
                <View style={styles.container}>
                    <View style={styles.header}>
                        <Image source={pic_icon}/>
                        <Text style={styles.title}>
                            Photos
                        </Text>
                    </View>
                    <View style={styles.content}>
                        <FlatList
                            horizontal={true}
                            data={this.renderList}
                            renderItem={this.renderItem}
                            keyExtractor={(item,i) =>`row_${i}`}
                            ItemSeparatorComponent={() => (
                                <View style={styles.lineStyle} />
                            )}
                        />
                    </View>
                </View>
            </Fragment>
        )
    }
}

export default Photos;

const styles = StyleSheet.create({
    container:{
        paddingVertical:14,
        paddingHorizontal:16,
        backgroundColor:`#323541`
    },
    header:{
        alignItems:`center`,
        flexDirection:`row`
    },
    title:{
        fontSize:14,
        color:`#fff`,
        marginLeft:8,
        fontFamily:Const.fontFamily
    },
    content:{
        height:68,
        marginTop:18
    },
    itemStyle:{
        width:68,
        height:68
    },
    imageStyle:{
        flex:1,
        borderRadius:4
    },
    addButton:{
        width:68,
        height:68,
        borderRadius:4,
        borderWidth:2,
        borderColor:`#565B70`,
        alignItems:`center`,
        justifyContent:`center`
    },
    lineStyle:{
        width:8
    }
}) as any;